.ScrollableShadows {
    position: relative;
    display: flex;
    overflow: hidden;

    &::before,
    &::after {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        pointer-events: none;
        content: '';
        opacity: 0;
        transition: opacity 200ms ease;
    }

    .ScrollableShadows__inner {
        flex: 1;
    }

    &.ScrollableShadows--horizontal {
        height: 100%;

        .ScrollableShadows__inner {
            overflow-x: auto;
        }

        &::before {
            box-shadow: 16px 0 16px -16px rgb(0 0 0 / 25%) inset;
        }

        &::after {
            box-shadow: -16px 0 16px -16px rgb(0 0 0 / 25%) inset;
        }
    }

    &.ScrollableShadows--vertical {
        width: 100%;

        .ScrollableShadows__inner {
            overflow-y: auto;
        }

        &::before {
            box-shadow: 0 16px 16px -16px rgb(0 0 0 / 25%) inset;
        }

        &::after {
            box-shadow: 0 -16px 16px -16px rgb(0 0 0 / 25%) inset;
        }
    }

    &.ScrollableShadows--right::after,
    &.ScrollableShadows--left::before,
    &.ScrollableShadows--bottom::after,
    &.ScrollableShadows--top::before {
        opacity: 1;
    }
}
